<template>
  <div class="top">
    <div class="left"><img src="../assets/icon_欢迎模式.png" alt="">
      嗨~ 欢迎来到oi商城</div>
    <ul>

      <li v-if="!userinfo.id">
        <router-link to="/login">您好,请登录</router-link>
      </li>
      <li v-else>
        <router-link to="/login">您好,{{ userinfo.user_nickname|| userinfo.user_phone.replace(/^(\d{3})\d{4}(\d{4})/,'$1****$2') }}</router-link>
        <a @click="headerlogout">退出登录</a>
      </li>

      <li @click="tome" :plain="true"><a>个人中心</a></li>
      <li @click="gotocart"><a>我的购物车</a></li>
      <li @click="goAdmin"><a>管理员通道</a></li>

      <li @click="gotoev"><a>网站评价</a></li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Headertop',
  computed: {
    ...mapGetters(['userinfo'])
  },
  methods: {
    ...mapActions(['logout']),
    headerlogout() {
      this.$confirm('是否退出账号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '退出成功'
          })
          let result = this.logout({})
          window.localStorage.removeItem('userinfo')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    //购物车
    gotocart() {
      if (this.userinfo.id) {
        this.$router.replace('/shopcart')
      } else {
        this.$message({
          title: '提示',
          message: '请先登录'
        })
      }
    },
    //个人中心
    tome() {
      if (this.userinfo.id) {
        this.$router.replace({
          name: 'me'
        })
      } else {
        this.$message('请先登录')
      }
    },
    gotoev() {
      this.$router.replace('/evaluate')
    },
    goAdmin() {
      this.$router.replace('/admin')
    }
  }
}
</script>

<style scoped lang='less'>
.top {
  height: 40px;
  width: 100%;

  line-height: 40px;
  display: flex;
  justify-content: space-between;
  .left {
    height: 40px;
    font-family: '楷体';

    display: flex;
    img {
      height: 35px;
      margin-left: 20px;
    }
  }
  ul {
    display: flex;
    margin-right: 38px;

    li {
      padding-right: 8px;
      font-size: 13px;

      a:hover {
        color: red;
      }
    }
  }
}
</style>